<template>
  <!-- 只能有一个根标签 -->
  <!-- ①直接给box触发点击事件 -->
  <div class="box">
    <!-- ②给box1触发点击事件 -->
    <div class="box1" @click="handle" />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handle() {
      // 子组件内部触发父组件的自定义事件 (子传父)
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
}
.box1 {
    width: 50px;
    height: 50px;
    background-color: blue;
}
</style>
